<template>
    <div class="tablebox">
        <table  border="1px solid #9B9B9B" cellspacing="0" cellpadding="5">
            <thead>
                <tr><td :colspan="allcolspan">懋略各工序产出</td></tr>
                <tr>
                    <td rowspan="3">
                        <el-date-picker
                        v-model="picktime"
                        type="daterange"
                        range-separator="To"
                        start-placeholder="Start date"
                        end-placeholder="End date"
                        format="MM/DD"
                        style="width: 200px;"/>
                    </td>
                    <td rowspan="3">电池型号</td>
                    <td v-for="(item,key) in process" :key="key" :colspan="item>1?2:1" :rowspan="item>1?1:2">{{ key }}</td>
                </tr>
                <tr>
                    <td v-for="(item,index) in sidelist" :key="index">{{ item }}</td>
                </tr>
                <tr>
                    <td v-for="item in data" :key="item.id">{{ item.sum }}</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(time,index) in date">
                    <td>{{ time.month+'月'+time.day+'日' }}</td>
                    <td>{{ time.batteryModel }}</td>
                    <td v-for="item in data">{{ item.data[index] }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import mock from '../components/processOutputComponent/mock';
import TableSlot from '../components/TableSlot.vue';

const process = ref([])
const data = ref([])
const date = ref([])
const picktime = ref('')

const getdata = ()=>{
    let obj = {}
    date.value = [...mock.date]
    data.value = [...mock.data]
    data.value.forEach((ele,index) => {
        let sum = 0
        if(obj[ele.process]){
        obj[ele.process] = obj[ele.process]+1
        }else{
        obj[ele.process] = 1
        }
        ele.data.forEach(num=>{
            sum += num
        })
        data.value[index].sum = sum
    })
    process.value = {...obj}
}

const sidelist = computed(()=>{
    let arr = []
    data.value.forEach(item=>{
        if(item.side){
            arr.push(item.side)
        }
    })
    return arr
})
const allcolspan = computed(()=>{
    console.log(data)
    return data.value.length+2
})

getdata()
</script>

<style scoped>
td{
    min-width: 50px;
    min-height: 25px;
    padding: 5px;
    max-width: 250px;
}
.tablebox{
    text-align: center;
    width: auto;
    white-space: nowrap;
    width: 100%;
}
td:hover{
    background-color: rgb(187, 187, 187);
}
tr:hover{
    background-color: rgb(238, 238, 238);
}
thead{
    position: sticky;
    top:0;
    background-color: rgba(213, 213, 213, 0.7);
    backdrop-filter: blur(4px);
}
</style>
